<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">
    </view>
    <view class="inner">


      <view class="conditionWrap">
        <picker mode="date" fields="date" :value="chooseDate1" @change="chooseDate1Change">
          <view class="pickerInner">
            <view class="pickerInnerIconDate"></view>
            <view class="pickerInnerText" v-if="chooseDate1">{{ chooseDate1 }}</view>
            <view class="pickerInnerText" v-else>请选择日期</view>
          </view>
        </picker>
        <view class="conditionSplit"></view>
        <picker mode="date" fields="date" :value="chooseDate2" @change="chooseDate2Change">
          <view class="pickerInner">
            <view class="pickerInnerIconDate"></view>
            <view class="pickerInnerText" v-if="chooseDate2">{{ chooseDate2 }}</view>
            <view class="pickerInnerText" v-else>请选择日期</view>
          </view>
        </picker>
      </view>


      <view class="chooseList">
        <view class="chooseLi" v-for="(n,i) in list" :key="i" @click="chooseOne(n,i)">
          <view class="chooseLiLeft" :class="{chooseLiLeftActive:n.active}"></view>
          <view class="chooseLiContent">
            <view class="chooseLiContent1">水舱ID：586254</view>
            <view class="chooseLiContent2">4月17日 10:28</view>
          </view>
          <view class="chooseLiRight">¥299</view>
        </view>
      </view>


    </view>
    <view class="innerNext">
    </view>


    <view class="bottomBtnWrap">
      <view class="chooseLiLeft" @click="selectAll" :class="{chooseLiLeftActive:listAllSelected}"></view>
      <view class="chooseLiLeftText">全选</view>
      <view class="bottomBtn" @click="confirm">申请开票</view>
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      chooseDate1: '',
      chooseDate2: '',
      list: [
        { active: false },
        { active: false },
        { active: false },
      ],
      listActiveIndex: -1,
    }
  },
  computed: {
    listAllSelected(){
      return _.every(this.list, (n, i) => {
        return n.active
      })
    },
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    selectAll(){
      let valueNext = _.every(this.list, (n, i) => {
        return n.active
      })
      _.each(this.list, (n, i) => {
        n.active = valueNext ? false : true
      })
    },
    chooseOne(n, i){
      n.active = !n.active
    },
    chooseDate1Change(e){
      this.chooseDate1 = e.detail.value
    },
    chooseDate2Change(e){
      this.chooseDate2 = e.detail.value
    },
    confirm(){
      console.log(`1`, 1)
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #F7F9FB;
}

.innerPre {

}

.inner {

}

.innerNext {

}

.conditionWrap {
  display: flex;
  align-items: center;
  padding: 24px;
  .conditionSplit {
    width: 20px;
    height: 2px;
    background-color: black;
    margin: 0 24px;
  }
}

.chooseList {
  .chooseLi {
    background-color: #FFFFFF;
    padding: 24px;
    display: flex;
    align-items: center;

    border-bottom: 2px solid #00000008;

    .chooseLiLeft {
      width: 32px;
      height: 32px;

      background-image: url(#{$bgPath}/icon_select_00.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;

      margin-right: 24px;


    }
    .chooseLiLeftActive {
      background-image: url(#{$bgPath}/icon_select_01.png);

    }

    .chooseLiContent {

      .chooseLiContent1 {
        font-size: 30px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.8);
        line-height: 48px;
      }

      .chooseLiContent2 {
        font-size: 24px;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.5);
        line-height: 36px;
      }
    }


    .chooseLiRight {

      margin-left: auto;
      font-size: 34px;
      font-family: MiSans-Demibold, MiSans;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.8);
      line-height: 52px;
    }
  }
}

.bottomBtnWrap {
  display: flex;
  align-items: center;

  position: fixed;
  padding: 24px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;


  .chooseLiLeft {
    width: 32px;
    height: 32px;

    background-image: url(#{$bgPath}/icon_select_00.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;

    margin-right: 24px;
  }
  .chooseLiLeftActive {
    background-image: url(#{$bgPath}/icon_select_01.png);

  }
  .chooseLiLeftText {
    font-size: 28px;
    font-weight: normal;
    color: #000000;
    line-height: 36px;
  }
  .bottomBtn {
    background: rgba(23, 127, 255, 0.5);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;

    padding: 8px 24px;

    margin-left: auto;

    font-size: 28px;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 39px;

    display: flex;
    justify-content: center;
    align-items: center;

  }

}


</style>
